<template>
	
	<div class="applyz-bon-son">
		<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
		 <el-form-item label="手机号" prop="age">
		    <el-input  placeholder="请输入手机号" v-model.number="ruleForm2.age"></el-input>
		  </el-form-item>
		  <el-form-item label="原密码">
		    <el-input type="password" placeholder="请输入旧密码"></el-input>
		  </el-form-item>
		  <el-form-item label="新密码" prop="pass">
		    <el-input type="password" placeholder="请输入新密码" v-model="ruleForm2.pass" auto-complete="off"></el-input>
		  </el-form-item>
		  <el-form-item label="确认密码" prop="checkPass">
		    <el-input type="password" placeholder="请重新输入新密码" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
		  </el-form-item>
		  <el-form-item label="验证码">
		    <el-input type="input" placeholder="请输入验证码"></el-input>
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" @click="submitForm('ruleForm2')" class="span2">提交</el-button>
		  </el-form-item>
		</el-form>

	</div>
</template>

<script>
    export default {
    data() {
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('手机号不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入正确号码'));
          } else {
            if (value < 10000000000||value>99999999999) {
              callback(new Error('请输入正确号码'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm2.checkPass !== '') {
            this.$refs.ruleForm2.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm2.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm2: {
          pass: '',
          checkPass: '',
          age: ''
        },
        rules2: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          age: [
            { validator: checkAge, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
  
	
	
</script>

<style>
	.applyz-bon-son{
		height: 430px;
	}
	.el-input, .el-input__inner{
		width: 80%;
	}
	.el-input__inner{
		border: 1px solid #e8e8f2;
		background: #f5f6fb;
	}
	.el-button, .el-textarea__inner{
		width: 65%;
		background: #3052ac;
	}
	.span2>span{
		color: #fff;
	}
	form {
		padding: 20px 400px;
	}
	.el-form-item__label{
		color: #9aa2d1;
	}
</style>